<template>
  <div>
    <!-- 面包屑导航 -->
    <BreadCrumb></BreadCrumb>
    <!-- 产品搜索 -->
    <!-- 信息说明 -->
    <div class="header">
      <div class="form">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="订单号">
            <el-input v-model="formInline.number" size="small" placeholder="订单号"></el-input>
          </el-form-item>
          <el-form-item label="订单状态">
            <el-autocomplete
                        placeholder="请输入订单状态"
                        v-model="formInline.status"
                        :fetch-suggestions="querySearchAsync"
                    ></el-autocomplete>
          </el-form-item>
          <el-form-item label="添加时间">
            <el-date-picker v-model="formInline.date" size="small" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" size="small">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="group">
        <el-button type="warning" size="small" v-if="this.storeStatus.status==1" icon="el-icon-dish-1" @click="changeStatus(0)">闭店</el-button>
        <el-button type="success" size="small" v-if="this.storeStatus.status==0" icon="el-icon-dish-1" @click="changeStatus(1)">营业</el-button>
        <!-- <el-button size="small" type="danger" icon="el-icon-delete">批量删除</el-button> -->
      </div>
    </div>
    <!-- 产品列表 -->
    <div class="content">
      <el-table
      :data="tableData"
      @select="selectHandle"
      @select-all="selectHandle"
      style="width: 100%" border :default-sort = "{prop: 'date', order: 'descending'}">
      <el-table-column
      align="center"
      type="selection"
      width="55">
    </el-table-column>
      <el-table-column
      sortable
      align="center"
        prop="order_time"
        label="下单时间"
        width="180">
      </el-table-column>
      <el-table-column
      sortable
      align="center"
        prop="number"
        label="订单号"
        width="130">
      </el-table-column>
      <el-table-column
      sortable
      align="center"
        prop="amount"
        label="支付价格/￥"
        width="110">
      </el-table-column>
      <el-table-column
      align="center"
        prop="user_name"
        label="付款人"
        width="100">
      </el-table-column>
      <el-table-column
      align="center"
        prop="phone"
        label="联系电话"
        width="130">
      </el-table-column>
      <el-table-column
      align="center"
        prop="type"
        label="订单类型"
        width="130">
        <template slot-scope="scope">
          <span style="color: rgb(64,158,255);" v-if="scope.row.type==1">
            堂食
          </span>
          <span style="color: rgb(251, 72, 102);" v-if="scope.row.type==2">
            外带
          </span>
        </template>
      </el-table-column>
      <el-table-column
      align="center"
        prop="status"
        label="订单状态"
        width="100">
        <template slot-scope="scope">
          <span style="color: rgb(64,158,255);" v-if="scope.row.status==1">
            待付款
          </span>
          <span style="color: rgb(251, 72, 102);" v-if="scope.row.status==3">
            制作中
          </span>
          <span style="color: rgb(251, 72, 102);" v-if="scope.row.status==2">
            申请退款中
          </span>
          <span style="color: rgb(255, 165, 74);" v-if="scope.row.status==4">
            请取餐
          </span>
          <span style="color: rgb(103,194,58);" v-if="scope.row.status==5">
            已完成
          </span>
          <span style="color: rgb(144,147,153);" v-if="scope.row.status==6">
            已取消
          </span>
          <span style="color: rgb(255, 165, 74);" v-if="scope.row.status==7">
            已退款
          </span>
        </template>
      </el-table-column>
      <el-table-column
      align="center"
        prop="pay_status"
        label="支付状态"
        width="100">
        <template slot-scope="scope">
          <span style="color: rgb(251, 72, 102);" v-if="scope.row.pay_status==2">
            退款
          </span>
          <span style="color: rgb(103,194,58);" v-if="scope.row.pay_status==1">
            已支付
          </span>
          <span style="color: rgb(255, 165, 74);" v-if="scope.row.pay_status==0">
            未支付
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作"  align="center">
      <template slot-scope="scope">
        <el-button
          v-if="scope.row.status==3"
          icon="el-icon-message-solid"
          size="mini"
          type="warning"
          @click="handleGet(scope.$index, scope.row)">用户取餐</el-button>
          <el-button
          v-if="scope.row.status==4"
          icon="el-icon-check"
          size="mini"
          type="success"
          @click="handleFinish(scope.$index, scope.row)">完成订单</el-button>
          <el-button
          v-if="scope.row.status==2"
          icon="el-icon-check"
          size="mini"
          type="success"
          @click="handleRefund(scope.$index, scope.row)">处理退款</el-button>
        <el-button
        icon="el-icon-more"
          size="mini"
          type="primary"
          @click="handleSee(scope.$index, scope.row)">查看</el-button>
      </template>
    </el-table-column>
    </el-table>
    <div class="refundContainer">
      <el-dialog title="退款原因" :visible.sync="refundVisible">
        <div class="refundContent">
          <div class="reason">
            {{ refundReason }}
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="backRefund">退回申请</el-button>
          <el-button type="danger" @click="finishRefund">同意申请</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="dialogContainer">
      <el-dialog title="取消原因" :visible.sync="cancelVisible">
        <div class="cancelContent">
          <el-input
            type="textarea"
            autosize
            placeholder="请输入取消原因"
            v-model="cancelReason">
          </el-input>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelVisible = false">返回</el-button>
          <el-button type="danger" @click="confirmCancel(orderDetail.id)" style="margin-left:10px">确认取消</el-button>
        </div>
      </el-dialog>
      <el-dialog title="订单信息" :visible.sync="dialogVisible">
        <div class="dialogContent">
          <div class="orderInfo">
            <div class="numberContainer">
              订单号:
              <div class="number">
                {{ orderDetail.number }}
              </div>
              <div class="status">
                <div v-if="orderDetail.status==1">
                  待付款
                </div>
                <div v-if="orderDetail.status==3">
                  制作中
                </div>
                <div v-if="orderDetail.status==4">
                  请取餐
                </div>
                <div v-if="orderDetail.status==5">
                  已完成
                </div>
                <div v-if="orderDetail.status==6">
                  已取消
                </div>
                <div v-if="orderDetail.status==7">
                  已退款
                </div>
              </div>
            </div>
            <div class="orderTime">
              下单时间:
              <div class="time">
                {{orderDetail.order_time}}
              </div>
            </div>
          </div>
          <div class="detailContainer">
            <div class="usernameAndPhone">
              <div class="usernameContent">
                用户名:
                <div class="username">
                  {{ orderDetail.user_name }}
                </div>
              </div>
              <div class="phoneContent">
                手机号:
                <div class="phone">
                  {{ orderDetail.phone }}
                </div>
              </div>
            </div>
            <div class="remark">
              <div class="icon">
                <div>
                  备注
                </div>
              </div>
              <div class="content">
                {{ orderDetail.remark }}
              </div>
            </div>
            <div class="cancelContainer" v-if="orderDetail.status==6">
              <div class="cancelContent">
                取消原因: {{ orderDetail.cancel_reason }}
              </div>
              <div class="cancelTime">
                {{orderDetail.cancel_time}}
              </div>
            </div>
            <div class="dishes">
              <div class="title">
                菜品
              </div>
              <div class="dishContent">
                <div class="dish" v-for="(dish,index) in orderDetail.orderDetailList" :key="index">
                  <div class="name">
                    {{dish.name}}×{{ dish.number }}
                  </div> 
                  <div class="price">
                    ￥{{ dish.amount }}
                  </div>
                </div>
              </div>
            </div>
            <div class="priceContainer">
              <div class="title">
                费用
              </div>
              <div class="priceContent">
                <div class="dishPriceContainer">
                  <div class="dishPriceContent">
                    菜品小计:
                    <div class="dishPrice">
                      ￥{{orderDetail.amount}}
                    </div>
                  </div>
                  <div class="packContainer">
                    类型:
                    <div class="packPrice">
                      <span v-if="orderDetail.type==1">堂食</span>
                      <span v-if="orderDetail.type==2">外带</span>
                    </div>
                  </div>
                </div>
                <div class="allContent">
                  合计:
                  <div class="allPrice">
                    ￥{{orderDetail.amount}}
                  </div>
                </div>
                <div class="methodAndTime">
                  <div class="methodContainer">
                    支付渠道:
                    <div class="method">
                      <span v-if="orderDetail.pay_method==1">微信支付</span>
                    </div>
                  </div>
                  <div class="timeContainer">
                    支付时间:
                    <div class="time">
                      {{ orderDetail.checkout_time }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">返回</el-button>
          <el-button type="danger" @click="cancelVisible = true" v-if="orderDetail.status!=6">取消订单</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 分页组件 -->
    <div class="pagination">
      <Pagination :total="total" :pageSize="pageSize" @CurrentChange="getRecords" :page="page" obj="order"></Pagination>
    </div>
    </div>
  </div>
</template>

<script>
import Pagination  from '@/components/pagination/myPagination.vue';
// import BreadCrumb from '../../../components/Breadcrumb/breadCrumb.vue';
// import moment from 'moment'
import axios from 'axios' 
import dayjs from 'dayjs';
export default {
  components:{
    Pagination
  },
  data(){
    return{
      total:60,
      pageSize:6,
      page:1,
      formInline: {
        number: '',
        date: '',
        status:''
      },
      tableData: [],
      allStatus:[],
      timeout:null,
      state:'',
      dialogVisible:false,
      orderDetail:[],
      cancelReason:'',
      cancelVisible:false,
      refundVisible:false,
      storeStatus:'',
      refundId:'',
      refundReason:''
    }
  },
  mounted(){
    axios({
      url:'http://localhost:8080/kfc/admin/shop',
      method:'get',
      headers:{
        token:localStorage.getItem('jwt')
      }
    }).then(res=>{
      this.storeStatus=res.data.data
    })
    axios({
      url:`http://localhost:8080/kfc/admin/order/conditionSearch?page=${this.page}&pageSize=${this.pageSize}`,
      method:'get',
      headers:{
        token:localStorage.getItem('jwt')
      },
    }).then(res=>{
      this.tableData=res.data.data
    })
    this.allStatus=this.loadAll()
  },
  methods:{
    getRecords(val){
      this.tableData=val
    },
    selectHandle(selection){
      console.log(selection);
    },
    onSubmit() {
      let createTime=''
      let status=''
      if(this.formInline.date){
        createTime=dayjs(this.formInline.date).format('YYYY-MM-DD')
      }
      if(this.formInline.status=='待付款'){
        status=1
      }
      else if(this.formInline.status=='制作中'){
        status=3
      }
      else if(this.formInline.status=='请取餐'){
        status=4
      }
      else if(this.formInline.status=='已完成'){
        status=5
      }
      else if(this.formInline.status=='已取消'){
        status=6
      }
      else if(this.formInline.status=='已退款'){
        status=7
      }
      axios({
        url:`http://localhost:8080/kfc/admin/order/conditionSearch?page=${this.page}&pageSize=${this.pageSize}&orderTime=${createTime}&status=${status}&number=${this.formInline.number}`,
        method:'get',
        headers:{
          token:localStorage.getItem('jwt')
        },
      }).then(res=>{
        this.tableData=res.data.data
      })
      },
    handleFinish(index, row) {
        // 跳转编辑页面
        axios({
          url:`http://localhost:8080/kfc/admin/order/complete?id=${row.id}`,
          method:'put',
          headers:{
            token:localStorage.getItem('jwt')
          },
        }).then(res=>{
          if(res.status==200){
            this.$notify({
              title: '成功',
              message: '订单完成',
              type: 'success'
            });
            axios({
              url:`http://localhost:8080/kfc/admin/order/conditionSearch?page=${this.page}&pageSize=${this.pageSize}`,
              method:'get',
              headers:{
                token:localStorage.getItem('jwt')
              },
            }).then(res=>{
              this.tableData=res.data.data
            })
          }
          else{
            this.$notify.error({
              title: '错误',
              message: '操作失败'
            });
          }
        })
    },
    handleSee(index, row) {
      console.log(index,row);
      axios({
        url:`http://localhost:8080/kfc/admin/order/details?id=${row.id}`,
        method:'get',
        headers:{
            token:localStorage.getItem('jwt')
          },
      }).then((res)=>{
        console.log(res.data.data);
        this.orderDetail=res.data.data
      })
      this.dialogVisible=true
    },
    handleRefund(index,row){
      this.refundId=row.id
      this.refundReason=row.cancel_reason
      this.refundVisible=true
      console.log(index,row);
    },
    toProductPage(){
      this.$router.push('/product/productPage')
    },
    // 查看商品详情
    handleGet(index,row){
      console.log(index, row);
      axios({
        url:`http://localhost:8080/kfc/admin/order/pickMeal?id=${row.id}`,
        method:'get',
        headers:{
          token:localStorage.getItem('jwt')
        },
      }).then((res)=>{
        if(res.status==200){
            this.$notify({
              title: '成功',
              message: '操作成功',
              type: 'success'
            });
            axios({
              url:`http://localhost:8080/kfc/admin/order/conditionSearch?page=${this.page}&pageSize=${this.pageSize}`,
              method:'get',
              headers:{
                token:localStorage.getItem('jwt')
              },
            }).then(res=>{
              this.tableData=res.data.data
            })
          }
          else{
            this.$notify.error({
              title: '错误',
              message: '操作失败'
            });
          }
      })
    },
    querySearchAsync(queryString, cb){
        var allStatus=this.allStatus
        var results=queryString?allStatus.filter(this.createStateFilter(queryString)) : allStatus;
        clearTimeout(this.timeout)
        this.timeout=setTimeout(()=>{
            cb(results)
        },0*Math.random())
    },
    createStateFilter(queryString) {
        return (state) => {
            return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
    },
    loadAll(){
        return[
            {"value":"待付款"},
            {"value":"制作中"},
            {"value":"请取餐"},
            {"value":"已完成"},
            {"value":"已取消"},
            {"value":"已退款"},
        ]
    },
    confirmCancel(id){
      axios({
        url:'http://localhost:8080/kfc/admin/order/cancel',
        method:'put',
        headers:{
          token:localStorage.getItem('jwt')
        },
        data:{
          id:id,
          cancel_reason:this.cancelReason
        }
      }).then((res)=>{
        if(res.status==200){
          this.$notify({
            title: '成功',
            message: '取消成功',
            type: 'success'
          });
          axios({
            url:`http://localhost:8080/kfc/admin/order/conditionSearch?page=${this.page}&pageSize=${this.pageSize}`,
            method:'get',
            headers:{
              token:localStorage.getItem('jwt')
            },
          }).then(res=>{
            this.tableData=res.data.data
          })
        }
        else{
          this.$notify.error({
            title: '错误',
            message: '取消失败'
          });
        }
      })
      this.cancelVisible = false
      this.dialogVisible=false
    },
    changeStatus(status){
          axios({
            url:`http://localhost:8080/kfc/admin/shop/status?id=${this.storeStatus.id}&status=${status}`,
            method:'get',
            headers:{
              token:localStorage.getItem('jwt')
            }
          }).then(res=>{
            if(res.status==200){
              axios({
                url:'http://localhost:8080/kfc/admin/shop',
                method:'get',
                headers:{
                  token:localStorage.getItem('jwt')
                }
              }).then(res=>{
                this.storeStatus=res.data.data
                console.log(this.storeStatus);
              })
            }
          })
        },
      finishRefund(){
        axios({
          url:`http://localhost:8080/kfc/admin/order/refund?id=${this.refundId}&isAgree=1`,
          method:'get',
          headers:{
            token:localStorage.getItem('jwt')
          }
        }).then(res=>{
          console.log(res.data);
          axios({
              url:`http://localhost:8080/kfc/admin/order/conditionSearch?page=${this.page}&pageSize=${this.pageSize}`,
              method:'get',
              headers:{
                token:localStorage.getItem('jwt')
              },
            }).then(res=>{
              this.tableData=res.data.data
            })
          this.refundVisible = false
        })
      },
      backRefund(){
        axios({
          url:`http://localhost:8080/kfc/admin/order/refund?id=${this.refundId}&isAgree=0`,
          method:'get',
          headers:{
            token:localStorage.getItem('jwt')
          }
        }).then(res=>{
          console.log(res.data)
          axios({
              url:`http://localhost:8080/kfc/admin/order/conditionSearch?page=${this.page}&pageSize=${this.pageSize}`,
              method:'get',
              headers:{
                token:localStorage.getItem('jwt')
              },
            }).then(res=>{
              this.tableData=res.data.data
            })
          this.refundVisible = false
        })
      }
  }
}
</script>

<style lang="less" scoped> 
  .header{
    background: #FFF;
    margin-bottom: 20px;
    padding: 10px;
    .el-form-item{
      margin-bottom: 16px;
    }
    .group{
      border: 1px solid #eee;
      padding: 8px;
    }
  }
  .content{
    background: #FFF;
    .pagination{
      padding: 10px;
    }
  }
  .dialogContent{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .orderInfo{
      width: 97%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgb(229, 229, 229);
      padding-bottom: 20px;
      .numberContainer,.orderTime{
        display: flex;
        align-items: center;
      }
      .numberContainer{
        margin-left: 20px;
        .number{
          font-weight: bold;
          margin-left: 10px;
        }
        .status{
          margin-left: 10px;
          background-color: rgb(64,158,255);
          display: flex;
          align-items: center;
          justify-content: center;
          color:#FFF;
          border-radius: 5px;
          >div{
            margin: 8px;
          }
        }
      }
      .orderTime{
        margin-right: 20px;
        .time{
          margin-left: 10px;
        }
      }
    }
    .detailContainer{
      margin-top: 30px;
      background-color: rgba(245, 245, 245, 0.943);
      border-radius: 10px;
      width: 97%;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: hidden;
      .usernameAndPhone{
        width: 90%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20px;
        .usernameContent{
          display: flex;
          align-items: center;
          .username{
            margin-left: 10px;
          }
        }
        .phoneContent{
          display: flex;
          align-items: center;
          .phone{
            margin-left: 10px;
          }
        }
      }
      .remark{
        width: 90%;
        background-color: rgb(236,245,255);
        border-radius: 10px;
        border: 1px solid rgb(179,216,255);
        display: flex;
        align-items: center;
        margin-top: 20px;
        .icon{
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: rgb(64,158,255);
          border-radius: 5px;
          color: #FFF;
          margin-left: 10px;
          margin-top: 10px;
          margin-bottom: 10px;
          >div{
            margin: 10px;
            margin-top: 6px;
            margin-bottom: 6px;
          }
        }
        >.content{
          background: none;
          margin-left: 30px;
          color:rgb(64,158,255);
        }
      }
      .cancelContainer{
        margin-top: 20px;
        width: 90%;
        background-color: rgb(254,240,240);
        border-radius: 10px;
        border: 1px solid rgb(251,196,196);
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20px;
        .cancelContent{
          margin-left: 10px;
          margin-top: 10px;
          margin-bottom: 10px;
          color:rgb(245,108,108);
        }
        .cancelTime{
          margin-right: 10px;
          color:rgb(245,108,108);
        }
      }
      .dishes{
        width: 90%;
        display: flex;
        margin-top: 20px;
        .dishContent{
          margin-left: 30px;
          display: flex;
          flex-direction: column;
          // align-items: center;
          .dish{
            display: flex;
            align-items: center;
            .price{
              margin-left: 10px;
            }
          }
        }
      }
      .priceContainer{
        width: 90%;
        display: flex;
        margin-top: 20px;
        .priceContent{
          margin-left: 30px;
          display: flex;
          flex-direction: column;
          .dishPriceContainer{
            display: flex;
            align-items: center;
            .dishPriceContent{
              width: 140px;
              margin-right: 250px;
              display: flex;
              align-items: center;
              .dishPrice{
                margin-left: 10px;
              }
            }
            .packContainer{
              display: flex;
              align-items: center;
              .packPrice{
                margin-left: 10px;
              }
            }
          }
          .allContent{
            margin-top: 10px;
            display: flex;
            align-items: center;
            font-weight: bold;
            .allPrice{
              margin-left: 10px;
              font-weight: normal;
              color:rgb(245,108,108);
            }
          }
          .methodAndTime{
            margin-top: 10px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            .methodContainer,.timeContainer{
              display: flex;
              align-items: center;
            }
            .methodContainer{
              width: 140px;
              margin-right: 250px;
              .method{
                margin-left: 10px;
              }
            }
            .timeContainer{
              .time{
                margin-left: 10px;
              }
            }
          }
        }
      }
    }
  }
</style>